安安～我是ChiYu～
昨天，LumenDesk 的邀請成員流程終於走完。新團隊接到的第一個工作是建立內部活動，畫面裡馬上出現一大群數字：48,000 元預算、每組人數、配送距離、餐點數量，活動結束後還要收滿意度。
我把需求濃縮成一句：
幫我做一個可以設定預算、調整範圍、填滿意度，還能選餐點數量的畫面。
這句 Prompt 交出去，得到的就是昨天結尾那張畫面。
圖 1：和昨天結尾是同一個 AI 第一版。預算、人數、距離、餐點與滿意度各有數字，操作方法卻全部只剩拖曳。
五條 Slider 排得很統一，使用者則要靠手感拖出 48,000 元預算，再拖出 2 份餐點，最後繼續拖一個 4 顆星評價。
數字全部有顯示，操作方法卻開始為難人。
48,000 元必須精確保存；配送距離從 8 公里調到 9 公里，可以接受快速微調；加購 2 份餐點只會少量增減；4 顆星表達的是感受，不是拿來計算的 4.0。
我先打開數值控制比較頁，把這些任務放在一起看。
圖 2：同樣是數字，精確資料、少量增減、連續範圍與主觀評價需要不同控制。
網站上的通知音量 Slider 範圍是 0 到 100，每次調整 5。我把焦點放上去，按一次方向鍵，滑塊位置、百分比和「目前通知音量」一起更新。
這個操作很適合音量。使用者通常只想稍微大聲或小聲；如果產品真的要求精確到 63，就不該只留一條 Slider 讓人靠位置猜。
接著把同一條 Slider 拿去輸入 48,000 元預算，事情就不太對了。步進設 5,000，永遠到不了 48,000；改成 1,000，要從很遠的位置慢慢按；步進再縮小，拖曳時又更難精確。
另一邊，我在 Number Input 輸入超過上限的 250000。欄位保留原值，直接說明允許範圍是 0 到 200,000，讓我知道該修哪個數字。
| 實際操作 | 畫面結果 | 我的判斷 |
|---|---|---|
| Slider 按一次方向鍵 | 依固定步進改變，位置與數字同步 | 適合快速微調程度 |
| Number Input 輸入 250,000 | 保留精確輸入並指出上限 | 適合需要保存與修正的資料 |
Slider 沒有做錯，只是預算根本不該靠位置猜。選型分界落在精確度與任務，不在元件有沒有動畫。
我會先問這個數字能不能只取「差不多」，接著再看使用者要直接輸入、少量加減、拖曳範圍，還是表達評價。
圖 3：精確資料、固定步進、連續範圍、少量件數與主觀評價，各自有合適的數值控制。
| 使用者的任務 | 適合的元件 | 先說清楚的規則 |
|---|---|---|
| 輸入要儲存與驗證的金額或數量 | Number Input | 單位、格式、最小值、最大值與小數規則。 |
| 在固定範圍內微調精確數字 | Spinbutton | 步進大小、直接輸入與抵達邊界後的回饋。 |
| 快速調整單一程度 | Slider | 目前值、兩端意義與觸控可操作性。 |
| 同時設定最低與最高範圍 | Range Slider | 兩端數字、不可交叉與精確輸入替代方案。 |
| 表達滿意度等主觀感受 | Rating | 各等級意思，以及能否修改或取消。 |
| 加減少量、離散的件數 | Stepper Control | 0、庫存上限與增加／減少按鈕的名稱。 |
這張表沒有哪一列是「看起來比較現代」。數字的單位、精確度和修改方式先決定，元件才有位置坐。
這裡還要先拆一個名稱陷阱：Number Input、Spinbutton 與 Stepper Control 在不同設計系統裡可能重疊。原生 <input type="number"> 本身就帶有 spinbutton 語意；有些元件庫也會直接把「可輸入、可上下加減」整組叫 Number Input。這篇為了方便比較，將直接輸入精確資料的版本稱為 Number Input，把固定步進與上下控制明顯放大的版本稱為 Spinbutton，再把只能按加減、通常不能任意輸入的件數控制稱為 Stepper Control。真正要驗收的是操作，不是元件名片。
Number Input｜數字輸入欄 適合預算、金額與需要驗證的精確數量。LumenDesk 的單月預算就用它。
圖 4：Number Input 顯示新臺幣單位、允許範圍、目前輸入與錯誤修正方式。
網站範例把單月預算限制在 NT$ 0 到 NT$ 200,000。我輸入 250000 後，欄位保留原值、標示無效，並顯示「預算必須介於 NT$ 0 與 NT$ 200,000。」
我在意的是它沒有默默把數字截成 200000，也沒有清空欄位。使用者還看得到自己輸入了什麼，才知道要改哪裡。
Vibe Coding 的數值需求至少要交代單位、上下限、步進，以及超出範圍後要保留、修正或阻擋。只寫「最大 20 萬」，AI 可能交出三種不同結果，每一種截圖都看起來有道理。
Spinbutton｜數值微調器 適合範圍不大、每次固定增減，又允許直接輸入的精確數字。
圖 5：每組人數介於 1 到 20，可以直接輸入，也能每次加減 1。
Spinbutton 很適合每組人數、重試次數等小範圍數值。抵達上限或下限後，控制要停止並說清楚目前邊界。拿它一路按到數十萬預算，使用者大概會先把滑鼠按壞；如果保留直接輸入，至少別逼人只靠加號爬完全程。
Stepper Control｜數量步進控制 更接近件數控制。加購餐點從 2 份變 3 份，按一下加號就夠了，通常不需要貼上一個很大的數字。
圖 6：增加與減少各有可理解名稱；數量到 0 或庫存上限後，控制要正確停下。
Stepper Control 與 Spinbutton 都會加減數字，差別在這篇採用的操作方式：Spinbutton 可以直接輸入，也能用固定步進微調；Stepper Control 只讓使用者按幾下增加或減少，適合商品與餐點件數。若你使用的元件庫把兩者叫成同一個名字，先看它能不能輸入、怎麼到達邊界，不用為命名吵到餐點都涼了。
Slider｜滑桿 適合音量、透明度與偏好程度，使用者通常只想快速調到一個大致位置。
圖 7：通知音量可用方向鍵依步進調整，滑塊位置、百分比與目前值同步更新。
「差不多」不表示數字可以藏起來。只看滑塊位置，很難分辨目前是 60 還是 65；兩端代表安靜、最大聲或其他意義，也要在畫面上說明。手機版則要確認滑軌與控制點容易觸碰，不能只驗收桌面滑鼠拖曳。
Range Slider｜範圍滑桿 同時控制最低與最高值，適合快速縮小價格或活動預算範圍。
圖 8：畫面持續顯示「NT$ 30,000 – 80,000」、完整尺度與兩端控制，最低值不能跑到最高值右邊。
若使用者最後要提交一筆精確預算，我不會只留下 Range Slider。它可以先縮小範圍，旁邊仍要提供兩個 Number Input，讓人輸入真正要保存的最低與最高金額。
Rating｜評分控制 用在滿意度等主觀評價。4 顆星代表「滿意」，不該假裝成測量得出的精確小數。
圖 9：Rating 同時顯示 4 / 5 與「滿意」，使用者可以重新選擇，也能取消評分。
只有五顆星和填滿顏色，對鍵盤與輔助科技使用者都不夠。畫面要說出目前幾分、各等級的文字意義，以及點錯後能不能修改或取消。
六種控制可在 數值控制完整比較頁 集中核對。比較後再進各元件頁操作，會比看見數字就先拉一條 Slider 穩定得多。
把活動設定裡的數字分工後，我會這樣交給 AI：
為活動報名設定頁建立六種數值控制：
1. 「單月預算」使用 Number Input，單位是新臺幣，只接受 0 到 200000 的整數；輸入錯誤或超出範圍時保留內容，並在欄位附近說明如何修正。
2. 「每組人數」使用 Spinbutton，範圍 1 到 20，步進 1；可直接輸入，也可用上下控制調整。
3. 「配送距離」使用 Slider，範圍 0 到 30 公里、步進 1 公里；持續顯示目前數值，支援方向鍵與點擊滑軌調整。
4. 「活動預算範圍」使用 Range Slider，範圍 0 到 200000、步進 5000；持續顯示最低與最高金額，最小值不得大於最大值，並提供兩個 Number Input 作為精確輸入方式。
5. 「本次服務評分」使用 1 到 5 的 Rating；每個分數都有文字意義，使用者可以修改，也可以取消評分。
6. 「加購餐點數量」使用 Stepper Control，範圍 0 到 8；增加與減少按鈕都要有可理解名稱，到 0 或庫存上限時清楚回饋。
Slider 與 Range Slider 都要支援鍵盤調整；在手機上，滑軌與控制點必須容易觸碰。不要只用位置或顏色表達目前數值。
交付前，我會故意輸入一次超過上限的預算，把 Range Slider 的兩端拉近，把 4 顆星改成 2 顆後取消，再將餐點減到 0。只要其中一步讓人不知道要修什麼或目前值是多少，這個控制就還不能收件。
活動預算用 Number Input 保存 48,000 元；每組人數由 Spinbutton 微調；餐點交給 Stepper Control；配送距離才使用 Slider；Range Slider 負責先縮小範圍；Rating 留到活動結束後收集感受。
數字仍然可以使用同一套視覺 Token，但精確資料、少量增減、範圍與感受不再互相代打。錯誤值也會留在畫面上讓人修，不會被控制項偷偷改成一個看似合理的答案。
接著我按下「下一步」，活動日、報名期間、預約時段和整月活動，全被 AI 放進同一張 Calendar。
圖 10：日期格同時標示單日、區間、時間與活動。畫面資訊不少，卻看不出點一下究竟要完成哪一份工作。
明天要處理的問題，從「數字都用 Slider」換成了「日期都用 Calendar」。看來這套一視同仁的精神，AI 暫時還不打算放棄。
<input type="number">
<input type="range">
資料查閱：2026-08-07。
iThome鐵人賽
看影片追技術